<!--
 * @jixuanyu: jixuanyu
 * @Date: 2022-05-25 20:25:35
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<template>
  <z-space direction="vertical">
    <z-time-picker v-model:value="value" :disabledHours="disabledHours" :disabledMinutes="disabledMinutes" :disabledSeconds="disabledSeconds" value-format="HH:mm:ss" />
    <z-time-picker v-model:value="value" max="22:22:33" min="1:11:22" value-format="HH:mm:ss" />
    <z-time-picker v-model:value="value" max="22:00:00" min="1:11:22" value-format="HH:mm:ss" />
  </z-space>
</template>
<script>
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  setup() {
    const range = (start, end) => {
      const result = []

      for (let i = start; i < end; i++) {
        result.push(i)
      }

      return result
    }

    const value = ref();
    const disabledHours = () => {
      return range(2,6)
    }
    const disabledMinutes = () => {
      return range(20,40)
    }
    const disabledSeconds = () => {
      return range(20,40)
    }
    return {
      value,
      disabledHours,
      disabledMinutes,
      disabledSeconds,
    };
  },

});
</script>